<template>
  <view class="pagination">
    <button
      class="page-btn"
      :disabled="pageNum <= 1"
      @click="changePage(pageNum - 1)"
    >
      上一页
    </button>
    <view class="page-info">
      第 {{ pageNum }} 页<span v-if="totalPages"> / 共 {{ totalPages }} 页</span>
    </view>
    <button
      class="page-btn"
      :disabled="totalPages && pageNum >= totalPages"
      @click="changePage(pageNum + 1)"
    >
      下一页
    </button>
  </view>
</template>

<script scoped>
export default {
  name: 'Pagination',
  props: {
    pageNum: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      required: true
    },
    // 后端返回的总记录数
    total: {
      type: Number,
      default: 0
    }
  },
  computed: {
    totalPages() {
      return this.total > 0 ? Math.ceil(this.total / this.pageSize) : 0;
    }
  },
  methods: {
    changePage(newPage) {
      if (newPage < 1) {
        newPage = 1;
      }
      if (this.totalPages && newPage > this.totalPages) {
        newPage = this.totalPages;
      }
      this.$emit('page-change', newPage);
    }
  }
};
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
  margin: 20rpx 0;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.page-btn {
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 10rpx 20rpx;
  font-size: 28rpx;
  margin: 0 10rpx;
}
.page-btn:disabled {
  background-color: #ccc;
}
.page-info {
  font-size: 28rpx;
  color: #333;
}
</style>
